<template>
	<view id="id" style="width:740rpx;height:100%;background-color: #f8f8f8">
		<view id="tab">
			<span :class="current_class"  @click="current()">当前订单</span>
			<span :class="history_class" @click="history()">历史订单</span>
		</view>
		<view v-if="status" style="margin-top: 105rpx;">
			<currentOrder></currentOrder>
		</view>
		<view v-if="!status" style="margin-top: 105rpx;">
			
			<historyOrder ></historyOrder>
		</view>
		<view class="nav">
			<view class="item" @click="skipToShouye()">
				<image src="../../../static/首页.png" class="pic" style="margin-left: 18rpx;"></image>
				<span class="word">首页</span>
			</view>
			<view class="item" @click="skipToBuy()">
				<image src="../../../static/点单.png" class="pic"></image>
				<span class="word">点单</span>
			</view>
			<view class="item" @click="skipToMyOrder()">
				<image src="../../../static/订单.png" class="pic"></image>
				<span class="word">订单</span>
			</view>
			<view class="item" @click="skipToMine()">
				<image src="../../../static/我的.png" class="pic"></image>
				<span class="word">我的</span>
			</view>
		</view>
	</view>
</template>

<script>
	import  nav from "../navv/nav.js"
	import currentOrder from "./currentOrder/currentOrder.vue"
	import historyOrder from "./historyOrder/historyOrder.vue"
	export default {
		data() {
			return {
				status:true,
				current_class:['tab','checked'],
				history_class:['tab'],
				timer:null
			}
		},
		onShow() {
			// this.timer=setInterval(()=>{
			// 	let query = uni.createSelectorQuery().in(this);
			// 	query.select('#id').boundingClientRect(data => {
			// 	  console.log("得到布局位置信息" + JSON.stringify(data));
			// 	  console.log("节点离页面顶部的距离为" + data.top);
			// 	}).exec()},1000)
		},
		onHide(){
			// clearInterval(this.timer)
		},
		methods: {
			current(){
				this.status=true
				this.current_class.splice(1,1)
				this.current_class.push('checked')
				this.history_class.splice(1,1)
			},
			history(){
				this.status=false
				this.current_class.splice(1,1)
				this.history_class.splice(1,1)
				this.history_class.push('checked')
			},
			change_class(){
				
			},
			...nav
		},
		components:{
			currentOrder,
			historyOrder
		}
	}
</script>

<style scoped>
	#tab{
		width: 747rpx;
		height:104rpx;
		border-width: 1rpx;
		border-color: #ededed;
		border-style: solid;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
		position: fixed;
		background-color: white;
		top: 0rpx;
	}
	.tab{
		display: block;
		width:172rpx;
		height: 70rpx;
		font-size: 40rpx;
		color:grey;
		text-align: center;
		
		font-weight: 400;
		
		
		
	}
	.checked{
		border-bottom: 5rpx solid green;
		color: green;
	}
	.nav{
		display: flex;
		position: fixed;
		top:92%;
		background-color: white;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		border-top: 2rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: #d0d0d0;
		z-index: 99;
	}
	.word{
		font-size: 25rpx;
	}
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		width: 65rpx;
		height:95rpx;
		padding: 5rpx;
	}
	.pic{
		width: 60rpx;
		height: 80rpx;
	}

</style>
